
<html>
    
    <head>
        <meta charset="utf-8">
        <title>iPhone の加速度, 傾きの値を JavaScript 取得する</title>
        
        <script>
            
            var $id = function(id)
            {
                return document.getElementById(id);
            }
            
            window.addEventListener('devicemotion', function(e){
                // 重力加速度(3軸)
                var gravity = e.accelerationIncludingGravity;
                $id("gravity").innerHTML = gravity.x + ', ' + gravity.y + ', ' + gravity.z;
                
                return ;
                
                // ここからはiPhone 4 以上でしか動かない
                // 私は iPhone 3GS なのでオフる(悔しいのでw)

                // 加速度(3軸)
                var accele = e.acceleration;
                $id("accele").innerHTML = accele.x + ', ' + accele.y + ', ' + accele.z;
                
                // 回転加速度
                var rotation = e.rotationRate;
                $id("rotation").innerHTML = rotation.x + ', ' + rotation.y + ', ' + rotation.z;
            });
            
        </script>
        
    </head>
    
    <body>
        
        <h1>iPhone の傾きの値を JavaScript 取得する</h1>
        <p>Gravity : <span id="gravity"></span></p>
        <p>Acceleration : <span id="acceleration"></span></p>
        <p>Rotation : <span id="rotation"></span></p>
        
    </body>

</html>
